// input输入动画
const inputs = document.querySelectorAll(".input")

function addcl() {
    let parent = this.parentNode.parentNode;
    parent.classList.add("focus")
}

function remcl() {
    let parent = this.parentNode.parentNode;
    if (this.value === "") {
        parent.classList.remove("focus")
    }
}

inputs.forEach(input => {
    input.addEventListener("focus", addcl);
    input.addEventListener("blur", remcl);
})
// dom操作
// 选择元素
var layer = $('.layer');
var layer_info = $('.layer div div');

// 表单提交逻辑
$('.btn').click(function () {
    const info = $('form input');
    // console.log(info[0].value, info[1].value);
    // 判断两次输入的密码是否相同
    if (info[0].value != info[1].value) {
        alert('两次输入的密码不一致')
        // 清空密码框
        info[0].value = '';
        info[1].value = '';
    } else {
        $.ajax({
            type: 'POST',
            url: '/api/users/verifyEmailCode',
            data: {
                'user': {
                    'password': info[0].value,
                    // 从storage中获取邮箱地址
                    'email': localStorage.getItem('email'),
                    'emailCode': info[2].value
                }
            },
            success: function (data) {
                //清除storage中的邮箱地址
                localStorage.removeItem('email');
                // 清楚storage中的token
                localStorage.removeItem('token');
                layer_info.attr('id', 'success');
                layer_info.append('<i class="fas fa-smile"><span> 密码修改成功</span></i>');
                layer.fadeIn(600);
                setTimeout(function () { layer.fadeOut(450); }, 1500);
                setTimeout(function () { window.location.href = '/index.html'; }, 2300);
            },
            error: function (err) {
                console.log(err.responseText);
                // 失败
                layer_info.attr('id', 'error');
                errorMessage = err.responseText.match(/[\u4e00-\u9fa5]+/g);
                layer_info.append(`<i class="fas fa-tired"><span> 密码修改失败：${errorMessage}</span></i>`);
                layer.fadeIn(600);
                setTimeout(function () { layer.fadeOut(450); }, 1500);
                // 清楚layer_info的id和内容
                setTimeout(() => { layer_info.removeAttr('id'); layer_info.empty(); }, 6000);
            }
        });
        $('input').val('');
    }
});
